import { createContext, useContext } from "react"
// 多间组件属性穿透的钩子 
const LevelContext = createContext()      //对象
console.log('LevelContext', LevelContext)
function UI2() {
    const level = useContext(LevelContext)
    return (
        <div>我是中
            <LevelContext.Provider value={level + 1}>
                <UI3></UI3>
            </LevelContext.Provider>
        </div>
    )
}
function UI3() {
    return (
        <div>我是下</div>
    )
}
export default function UI1() {
    const level = useContext(LevelContext)
    return (
        <div>我是顶
            <LevelContext.Provider value={level + 1}>
                <UI2></UI2>
            </LevelContext.Provider></div>
    )
}